<template>
  <div class="blogList-container">
    <div class="blogList-content">
      <el-card
        shadow="hover"
        v-for="item in blogLists"
        :key="item.knowledgeId"
        class="blog-content-card"
        
      >
        <a class="title-link" @click="goBlogDetail(item)"
          ><p class="title" v-html="item.title"></p
        ></a>
        <div class="content" v-html="item.content" style="height: 60px;overflow: hidden;"></div>
        <div class="card-bottom">
          <div class="card-bottom-left">
            <span class="li"
              ><i
                class="el-icon-view"
                style="font-size: 18px; margin-right: 10px"
              ></i
              >{{ item.viewCounts }}</span
            >
            <span class="li"
              ><i
                class="el-icon-star-off"
                style="font-size: 18px; margin-right: 10px"
              ></i
              >{{ item.collectCounts }}</span
            >
            <span class="li"
              ><img
                src="../../../assets/images/userMain/点赞.png"
                style="height: 18px; margin-right: 10px"
              />{{ item.likeCounts }}</span
            >
            <span class="li">
              <i
                class="el-icon-chat-line-square"
                style="font-size: 18px; margin-right: 10px"
              ></i
              >{{ item.commentCounts }}
            </span>
          </div>
          <div class="card-bottom-right">
            <span>{{ item.author }}</span>
            <span class="update-time">{{ item.publishTime }}</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component({
  name: "blogList",
})
export default class blogList extends Vue {
  // 接受对象列表数据[{},{}],对象字段参上
  @Prop({
    type: Array,
    default: () => [],
  })
  blogLists!: any;
  //  打开新的标签页,传输文章id
  goBlogDetail(item: any) {
    const route = this.$router.resolve({
      name: "blogDetail",
      query: {
        knowledgeId: item.knowledgeId,
      },
    });
    window.open(route.href, "_blank");
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/themes.scss";
.blogList-container {
  .blogList-content {
    .blog-content-card {
      margin-bottom: 10px;
      @include useTheme {
        background-color: getVar("cardColor");
        color: getVar("textColor");
      }
      &:last-child {
        margin-bottom: 0px;
      }
      &::v-deep(.el-card__body) {
        padding: 12px 24px;
      }
      .title-link {
        .title {
          text-align: left;
          font-size: 16px;
          font-weight: 500;
        }
      }
      .content {
        text-align: left;
        color: gray;
        // 三行内容之间的间距
        margin-top: 5px;
      }
      .card-bottom {
        display: flex;
        justify-content: space-between;
        // 三行内容之间的间距
        margin-top: 5px;
        .card-bottom-left {
          display: flex;
          .li {
            display: flex;
            align-items: center;
            margin-right: 20px;
          }
        }
        .card-bottom-right {
          .update-time {
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>